:root
{
    --loading-point-color: rgba(0, 0, 0, 1);
    --loading-point-radius: 25px;
    --loading-point-a: 20deg;
}

#loading-overlay
{
    z-index: 599;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.loading-window
{
    width: 60%;
    height: 55%;
    margin-top: 120px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;

    background-color: #fcfcf0;
    border: 1px solid #000;
    border-radius: 10px;
}

.text-box
{
    top: calc(50% - 120px);
    display: block;
    position: relative;
    width: 80%;
    padding: 0;
    margin-right: 10%;
    margin-left: 10%;
    text-align: center;
    color: black;
}

.loading-section {
    top: calc(50% - 120px);
    width: 75px;
    height: 75px;
    padding: 10px;
    margin: auto;
    position: relative;
    display: block;
    align-items: center;
}

.loading-section span
{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: block;
    top: 50%;
    left: 50%;
    position: absolute;
    color: white;
    animation: loading 2s linear infinite;
}

.loading-section .point2
{
    animation-delay: 0.15s;
}
.loading-section .point3
{
    animation-delay: 0.3s;
}
.loading-section .point4
{
    animation-delay: 0.45s;
}
.loading-section .point5
{
    animation-delay: 0.6s;
}
.loading-section .point6
{
    animation-delay: 0.75s;
}
.loading-section .point7
{
    animation-delay: 0.9s;
}
.loading-section .point8
{
    animation-delay: 1.05s;
}

@keyframes loading {
    0%{
        transform: rotate(0deg);
    }
    12%{
        box-shadow: 0 calc(-1 * var(--loading-point-radius)) rgba(0, 0, 0, 0);
        transform: rotate(calc(-1 * (180deg - 6 * var(--loading-point-a)) / 4 - 3 * var(--loading-point-a)));
    }
    25%{
        box-shadow: 0 calc(-1 * var(--loading-point-radius)) var(--loading-point-color);
        transform: rotate(calc(-2 * (180deg - 6 * var(--loading-point-a)) / 4 - 5 * var(--loading-point-a)));
    }
    36%{
        transform: rotate(calc(-3 * (180deg - 6 * var(--loading-point-a)) / 4 - 6 * var(--loading-point-a)));
    }
    50%{
        transform: rotate(-180deg);
    }
    62%{

        transform: rotate(calc(-180deg - 1 * (180deg - 6 * var(--loading-point-a)) / 4 - 0 * var(--loading-point-a)));
    }
    75%{
        box-shadow: 0 calc(-1 * var(--loading-point-radius)) var(--loading-point-color);
        transform: rotate(calc(-180deg - 2 * (180deg - 6 * var(--loading-point-a)) / 4 - 1 * var(--loading-point-a)));
    }
    87%{
        box-shadow: 0 calc(-1 * var(--loading-point-radius)) rgba(0, 0, 0, 0);
        transform: rotate(calc(-180deg - 3 * (180deg - 6 * var(--loading-point-a)) / 4 - 3 * var(--loading-point-a)));
    }
    100%{
        transform: rotate(-360deg);
    }
}
